<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .div1 {
            display: inline-block;
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 1px solid silver;
            margin-top: 20px;
            overflow: hidden;
            overflow-y: auto;
            vertical-align: top;
        }

        .div2 {
            display: inline-block;
            margin-top: 20px;
            margin-left: 10px;
            border: 1px solid silver;
            overflow: hidden;
            overflow-y: auto;
            vertical-align: top;
        }
    </style>

    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css">
    <script type="text/javascript" src="/lib/zTree_v3/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/lib/zTree_v3/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/lib/zTree_v3/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript">
        var settingDept = {
            check: {
                enable: false,
                chkStyle: "radio",
                radioType: "all"
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "departmentCode",
                    pIdKey: "pdepartmentCode"
                },
                key: {
                    name: "departmentName"
                },
            },
            callback: {
                onClick: zTreeOnClick
            }
        };

        var settingUser = {
            check: {
                enable: true,
                chkStyle: "radio",
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "departmentid"
                },
                showTitle: true, //是否显示节点title信息提示 默认为true
                key: {
                    title: "id", //设置title提示信息对应的属性名称 也就是节点相关的某个属性 这样设置显示的是属性 title的内容
                    name: "name"
                }
            },
            callback: {
                beforeCheck: true,
                onCheck: onCheck
            }
        };

        //从后台取部门的值
        function getTree() {
            var tree = null;
            var ss = parent.config
            $.ajax({
                url: ss.server + "/admin/tree/getDeptTree",
                type: "get",
                contentType: "application/json",
                async: false,//false-同步（当这个ajax执行完后才会继续执行其他代码）；异步-与其他代码互不影响，一起运行。
                dataType: "json",
                success: function (data) {
                    tree = data.data;
                }, error: function (data) {
                }
            });
            return tree;
        }

        function selfsetting() {
            var treeObj = $.fn.zTree.getZTreeObj("treeMultiple1");//获取到树
            var nodesSys = treeObj.getNodes(); //可以获取所有的父节点
            var nodes = treeObj.transformToArray(nodesSys); //获取树所有节点
            for (var i = 0; i < nodes.length; i++) {
                nodes[i].isParent = true;
                treeObj.updateNode(nodes[i]);
            }
        }

        $(document).ready(function () {
            var treenode = $.fn.zTree.init($("#treeMultiple1"), settingDept, getTree());
            treenode.expandAll(true);
            selfsetting();
        });

        function zTreeOnClick(event, treeId, treeNode) {
            var deptNo = treeNode.departmentCode,
                ss = parent.config
            var tree;
            $.ajax({
                url: ss.server + "/admin/tree/getUsrByDeptNo",
                data: JSON.stringify({ "deptNo": deptNo }),
                type: "post",
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (data) {
                    tree = data.data;
                    $(document).ready(function () {
                        var treenode = $.fn.zTree.init($("#treeMultiple2"), settingUser, tree);
                        var kk = parent.$('#chooseUserNo').val();
                        var nodes = $.fn.zTree.getZTreeObj("treeMultiple2").getNodes(); //获取节点 
                        for (var i = 0; i < nodes.length; i++) {
                            if (nodes[i].id == kk) {
                                treenode.checkNode(nodes[i]);//勾选结点
                                break;
                            }
                        }
                    });
                }, error: function (data) {
                }
            })
        };

        function onCheck(e, treeId, treeNode) {
            var treeObj = $.fn.zTree.getZTreeObj("treeMultiple2"),
                nodes = treeObj.getCheckedNodes(true);
            parent.$('#chooseUser').val(nodes[0].name);
            parent.$('#chooseUserNo').val(nodes[0].id);
        };

        //保存数据
        function save() {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        }

        //通过搜索姓名生成树
        function search() {
            var tree,
                user = $("#user").val(),
                ss = parent.config;
            $.ajax({
                url: ss.server + "/admin/tree/getUsrByName?user=" + user,
                type: "post",
                contentType: "application/json",
                dataType: "json",
                success: function (data) {
                    tree = data.data;
                    $(document).ready(function () {
                        var treenode = $.fn.zTree.init($("#treeMultiple2"), settingUser, tree);
                        var kk = parent.$('#chooseUserNo').val();
                        var nodes = $.fn.zTree.getZTreeObj("treeMultiple2").getNodes(); //获取节点 
                        for (var i = 0; i < nodes.length; i++) {
                            if (nodes[i].id == kk) {
                                treenode.checkNode(nodes[i]);//勾选结点
                                break;
                            }
                        }
                    });
                }, 
                error: function (data) {}
            })
        }
    </script>
</head>

<body>
    <div class="layui-form-item">
        <span style="font-size: small;color: gray;margin-left: 10px;"><span style="color: red;">*</span> 可输入人员姓名查找人员 或
            点击部门选择人员：</span>
        <div class="layui-input-inline" style="margin-left: 5px;">
            <input type="text" id="user" autocomplete="off" class="layui-input" style="width:580px;height: 22px;">
            <button type="submit" onclick="search()" style="width:80px;height:30px;">搜 索</button>
        </div>
    </div>
    <div>
        <div class="div1">
            <ul id="treeMultiple1" class="ztree" style=" overflow-y: auto;"></ul>
        </div>
        <div class="div2" style="width: 320px;height:300px;padding: 10px;">
            <ul id="treeMultiple2" class="ztree" style=" overflow-y: auto; "></ul>
        </div>
    </div>
    <br>
    <div class="layui-form-item">
        <div class="layui-input-block">&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="layui-btn"
                style="width:80px;height:30px;border:none;outline:none;background-color:#1E9FFF;color:white;margin-left: 580px;"
                onclick="save()">确认</button>
        </div>
    </div>
</body>
</html>